<template>
	<view class="root pt-30">
		<view
			v-for="(detail, index) in details.list"
			:key="index"
			:style="{ padding: `30rpx` }"
			class="bgc-fff mb-30"
		>
			<label class="jc-sb fs-30 lh-3">
				<text class="color-333 fw-600 ellipsis">
					{{ detail.memo }}
				</text>
				<text class="color-f45455 fw-600">{{ detail.bouns_money }}</text>
			</label>
			<text class="color-999 fs-28">
				{{ detail.createtime }}
			</text>
		</view>

		<uni-load-more :status="loadStatus" />
	</view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";
	import { Pager } from "@/static/type";
	let requestFlag: boolean = false;

	@Component
	export default class Details extends Vue {
		// component property
		details: Pager<AnyObject> = { page: 1, list: [], size: 30 };
		loadStatus: string = "loading";
		mode: string = "";

		onLoad({ mode }: { mode: string }) {
			this.mode = mode;
			uni.setNavigationBarTitle({
				title: `${
					({
						balance: "余额",
						shareRed: "分红",
						reward: "赏金",
					} as AnyObject)[mode]
				}明细`,
			});
			this.getListData();
		}

		onReachBottom() {
			this.getListData();
		}
		getListData() {
			const { $request, details } = this;

			if (requestFlag || !details.page) return;
			(requestFlag = true), (this.loadStatus = "loading");

			$request
				.get("/index/balance", {
					type: this.mode,
					page: details.page,
					size: details.size,
				})
				.then(({ data }) => {
					details.list.push(...data.data);
					details.page = data.current_page < data.last_page ? ++data.current_page : 0;
					this.loadStatus = details.page ? "more" : "noMore";
				})
				.finally(() => (requestFlag = false));
		}
	}
</script>

<style lang="scss" scoped>
	// scss
</style>